<template>
	<view class="container">
		<view class="card">
			<uni-segmented-control :current="currentIndex" :values="items" @clickItem="onClickItem" />
			<view class="content">
				<uni-forms ref="baseForm" label-width="100" :modelValue="form" label-position="top">
					<view v-if="currentIndex === 0">
						<uni-forms-item label="贷款总额" required>
							<uni-easyinput type="digit" v-model.trim="form.totalPrice" placeholder="请输入金额(万)" />
						</uni-forms-item>
						<uni-forms-item label="贷款年限" required>
							<uni-data-select v-model="form.year" :localdata="yearList" placeholder="请选择贷款年限"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="公积金利率" required>
							<uni-easyinput type="digit" v-model.trim="form.gjjRate" placeholder="请输入利率" />
						</uni-forms-item>
					</view>
					<view v-if="currentIndex === 1">
						<uni-forms-item label="贷款总额" required>
							<uni-easyinput type="digit" v-model.trim="form.totalPrice" placeholder="请输入金额(万)" />
						</uni-forms-item>
						<uni-forms-item label="贷款年限" required>
							<uni-data-select v-model="form.year" :localdata="yearList" placeholder="请选择贷款年限"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="商贷利率" required>
							<uni-easyinput type="digit" v-model.trim="form.sdRate" placeholder="请输入利率" />
						</uni-forms-item>
					</view>
				</uni-forms>
			</view>
			<button type="primary" @click="startComputed">开始计算</button>
		</view>
		
		<view class="result" v-if="showResult">
			<view class="title">
				<text>{{ currentIndex === 0 ? '公积金贷' : '商业贷' }}计算结果</text>
			</view>
			<view class="result-item">
				<text class="label">贷款金额</text>
				<text class="value">{{ resultData.totalLoan.toFixed(2) }} 元</text>
			</view>
			<view class="result-item">
				<text class="label">月还款额</text>
				<text class="value">{{ resultData.monthlyPayment.toFixed(2) }} 元</text>
			</view>
			<view class="result-item">
				<text class="label">利息总额</text>
				<text class="value">{{ resultData.totalInterest.toFixed(2) }} 元</text>
			</view>
			<view class="result-item">
				<text class="label">还款总额</text>
				<text class="value">{{ resultData.totalPayment.toFixed(2) }} 元</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';

	const showResult = ref(false)
	const currentIndex = ref(0)
	const items = ref(['公积金贷', '商业贷'])
	const form = reactive({
		totalPrice: '',
		year: '',
		gjjRate: '',
		sdRate: '',
	})
	const yearList = ref([
		{ text: '30年', value: 360 },
		{ text: '20年', value: 240 },
		{ text: '10年', value: 120 },
	])
	const resultData = reactive({
		totalLoan: 0,        // 贷款金额（元）
		monthlyPayment: 0,   // 月还款额
		totalInterest: 0,    // 利息总额
		totalPayment: 0      // 还款总额
	})
	
	const onClickItem = (e) => {
		if (currentIndex.value !== e.currentIndex) {
			currentIndex.value = e.currentIndex
			showResult.value = false
		}
	}
	
	// 等额本息计算
	const calculateEqualInstallment = (principal, monthlyRate, months) => {
		if (monthlyRate === 0) {
			const monthlyPayment = principal / months
			return {
				monthlyPayment,
				totalPayment: principal,
				totalInterest: 0
			}
		}
		const factor = Math.pow(1 + monthlyRate, months)
		const monthlyPayment = principal * monthlyRate * factor / (factor - 1)
		const totalPayment = monthlyPayment * months
		const totalInterest = totalPayment - principal
		return {
			monthlyPayment,
			totalPayment,
			totalInterest
		}
	}
	
	const startComputed = () => {
		// 验证表单
		if (currentIndex.value === 0) {
			if (!form.totalPrice || !form.year || !form.gjjRate) {
				uni.showToast({ title: '请完善公积金贷信息', icon: 'none' })
				return
			}
		} else if (currentIndex.value === 1) {
			if (!form.totalPrice || !form.year || !form.sdRate) {
				uni.showToast({ title: '请完善商业贷信息', icon: 'none' })
				return
			}
		} 
		// 计算加载
		uni.showLoading({
			mask: true
		})
		// 获取贷款参数
		const principal = parseFloat(form.totalPrice) * 10000  // 转换为元
		const months = parseInt(form.year)
		let rate = 0
		
		if (currentIndex.value === 0) {
			rate = parseFloat(form.gjjRate) / 100  // 转换为小数
		} else {
			rate = parseFloat(form.sdRate) / 100
		}
		const monthlyRate = rate / 12  // 月利率
		// 计算等额本息
		const result = calculateEqualInstallment(principal, monthlyRate, months)
		// 更新结果数据
		resultData.totalLoan = principal
		resultData.monthlyPayment = result.monthlyPayment
		resultData.totalInterest = result.totalInterest
		resultData.totalPayment = result.totalPayment
		uni.hideLoading()
		
		showResult.value = true
	}
	
</script>

<style scoped lang="scss">
	.container {
		background-color: #f8f9fa;
		padding: 24rpx;
		height: 100vh;
		.card {
			background-color: #fff;
			border-radius: 24rpx;
			padding: 24rpx 32rpx;
			.content {
				margin-top: 48rpx;
			}
		}
		.result {
			background-color: #f9fafb;
			border-radius: 24rpx;
			padding: 40rpx;
			color: #6B7280;
			width: 100%;
			.title {
				color: #111827;
			}
			.result-item {
				width: 100%;
				margin-top: 24rpx;
				color: #4B5563;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.value {
					color: #111827;
					font-weight: 600;
					margin-right: 8rpx;
				}
			}
		}
	}
</style>
